<template>
	<view>
		<!-- 半透明的灰色幕布，只有在展开状态下显示 -->
		<view v-if="expanded" class="overlay" @click="closeExpanded"></view>

		<!-- 底部栏内容 -->
		<transition name="expand-transition">
			<view class="bottom-bar" :class="{ expanded: expanded }">
				<!-- 展开状态下的内容 -->
				<template v-if="expanded">
					<view class="header">
						<text class="header-title">设置年级</text>
						<text class="close-button" @click="closeExpanded">✕</text>
					</view>
					<view class="content">
						<view class="section">
							<text class="section-title">规格</text>
						</view>
						<view class="option">
							<view class="option-item" :class="{ active: selectedGrade === gradeOption }"
								@click="selectGrade">
								{{ gradeOption }}
							</view>
						</view>
					</view>
				</template>

				<!-- 未展开时的底部栏内容 -->
				<template v-else>
					<view class="button-container more-course">
						<text>??</text>
						<text class="text">更多课程</text>
					</view>
					<view class="button-container right-buttons">
						<button class="detail-button">详情</button>
						<button class="buy-button" @click="openExpanded">立即购买</button>
					</view>
				</template>

				<!-- 展开后的底部“立即购买”按钮，占据全宽度 -->
				<button v-if="expanded" class="bottom-buy-button" @click="confirmPurchase">立即购买</button>
			</view>
		</transition>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
	components: {},
	data() {
		return {
			expanded: false,
			selectedGrade: null,
		};
	},
	computed: {
		...mapState({
			video: (state) => state.video,
			videoAbout: (state) => state.videoAbout, // 获取 video 和 videoAbout 数据
			userInfo: (state) => state.userInfo, // 从 store 获取 userInfo
		}),
	},
	created() {
		// 确保在组件创建时读取 gradeOption 数据，避免 undefined 错误
		this.gradeOption = this.videoAbout?.videoName?.slice(0, 4) || "年级"; // 若 videoAbout 未定义，默认值为 "年级"
	},
	methods: {
		...mapMutations(['setVideoAbout']), // 定义 Vuex mutation 方法

		openExpanded() {
			if (!this.userInfo || !this.userInfo.userId) {
				// 如果用户未登录，跳转到登录界面
				uni.navigateTo({
					url: '/pages/login/login'
				});
			} else {
				this.expanded = true;
			}
		},

		closeExpanded() {
			this.expanded = false;
		},
		selectGrade() {
			this.selectedGrade = this.gradeOption;
		},
		confirmPurchase() {
			// 跳转到订单创建页面
			uni.navigateTo({
				url: "/pages/order/index",
			});
		},
	},
};
</script>

<style scoped>
.wrapper {
	position: relative;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 999;
}

/* 动画 */
.expand-transition-enter-active,
.expand-transition-leave-active {
	transition: all 0.5s ease;
}

.expand-transition-enter,
.expand-transition-leave-to {
	transform: translateY(100%);
	opacity: 0;
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
	border-top: 1px solid #ddd;
	z-index: 1000;
	box-sizing: border-box;
	padding: 0 10px;
	transition: height 0.5s ease;
	/* 过渡动画 */
}

.bottom-bar.expanded {
	height: 60vh;
	/* 展开后的高度 */
	flex-direction: column;
	justify-content: flex-start;
	padding: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.button-container {
	display: flex;
	align-items: center;
}

.more-course {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
	color: #333;
}

.text {
	margin-top: 2px;
}

.right-buttons {
	display: flex;
	gap: 10px;
}

.detail-button {
	width: 100px;
	height: 35px;
	border-radius: 30px;
	/* 全圆角 */
	color: #fff;
	font-size: 14px;
	text-align: center;
	line-height: 35px;
	border: none;
	background-color: #4a90e2;
	flex-shrink: 0;
}

.buy-button {
	width: 100px;
	height: 35px;
	border-radius: 30px;
	/* 全圆角 */
	color: #fff;
	font-size: 14px;
	text-align: center;
	line-height: 35px;
	border: none;
	background-color: #e60012;
	flex-shrink: 0;
	transition: width 0.5s ease;
	/* 过渡动画，变宽 */
}

.bottom-bar.expanded .buy-button {
	width: 100%;
	/* 展开状态时变宽 */
}

/* 展开状态样式 */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 50px;
}

.header-title {
	font-size: 16px;
	font-weight: bold;
}

.close-button {
	font-size: 20px;
	cursor: pointer;
}

.content {
	flex: 1;
	width: 100%;
	padding: 10px 0;
}

.section-title {
	font-size: 14px;
	font-weight: bold;
}

.option {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.option-item {
	padding: 8px 16px;
	border: 1px solid #ddd;
	border-radius: 20px;
	font-size: 14px;
	color: #333;
	background-color: #f5f5f5;
	cursor: pointer;
}

.option-item.active {
	background-color: #e0e0e0;
}

/* 底部栏展开时的“立即购买”按钮 */
.bottom-buy-button {
	width: 100%;
	height: 50px;
	background-color: #e60012;
	color: #fff;
	font-size: 16px;
	border-radius: 30px;
	/* 全圆角 */
	text-align: center;
	line-height: 50px;
	border: none;
	margin-top: auto;
	transition: all 0.5s ease;
}
</style>
